<template>
  <Dialog :funcConfirm="handleConfirm"
          :funcCancel="handleClose"
          :headerTitle="headerTitle"
          :open="open">
    <template v-slot:body>
      <div class="content-wrapper">
        <div class="content-row" v-for="(item) of items" :key="item.key">
          <div class="row-name">
            <span class="name-required">{{'*'}}</span>
            <span class="name-text">{{item.title}}</span>
          </div>
          <div class="input-box">
            <input type="password"
                   v-model="item.value"
                   maxlength="20"
                   minlength="6"
                   :placeholder="item.placeholder"
                   @blur="focusInput = ''"
                   @focus="focusInput = 'password'">
          </div>
        </div>
      </div>
    </template>
  </Dialog>
</template>

<script>

import userService from "@api/userService";
import Dialog from "@/component/dialog/Dialog";

export default {
  components: {Dialog},
  props: {
  },
  data() {
    return {
      headerTitle: '修改密码',
      items: [
        {
          title: '旧密码：',
          placeholder: '请输入旧密码',
          value: '',
          key: 'old_password'
        },
        {
          title: '新密码：',
          placeholder: '请输入新密码',
          value: '',
          key: 'new_password'
        },
        {
          title: '确认新密码：',
          placeholder: '请确认新密码',
          value: '',
          key: 'new_re_password'
        },
      ],
    }
  },
  // 监听属性 类似于data概念
  computed: {
    open() {
      return this.$store.state.dialog.isOpenResetPassword
    },
  },
  // 监控data中的数据变化
  watch: {
    open(value) {
      if (!value) {
        return
      }
      this.items.map((item)=>{
        item.value = ''
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleClose() {
      this.$store.commit('dialog/RESET_PASSWORD_OPEN', false)
    },
    handleConfirm() {
      console.log(this.items)
      for (let i = 0; i < this.items.length; i++) {
        const item = this.items[i]
        if (item.value == '') {
          this.$message({
            message: item.placeholder,
            type: 'warning'
          });
          return
        }
      }

      this.$dialog({
        content: "修改密码后会退出登入，请重新输入新密码登入系统",
        funcConfirm: () => {
          this.request()
        }
      })
    },
    request() {
      let formData = new FormData()
      this.items.map((item)=>{
        formData.append(item.key, item.value)
      })
      userService.resetPassword(formData).then(res => {
        console.log(res)
        this.$store.commit('user/LOGOUT')
        this.$router.push({name: 'login'})
        this.$message({
          message: '修改密码成功',
          type: 'success'
        });
        this.handleClose()
      }).catch((res) => {
        console.log(res)
      })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
@import "@/style/scss/component/dialog/resetPasswordDialog.scss"
</style>
